<template>
	<div class="main">
		<div :class="schoolFlag ? 'chooseschool chooseschool_active' : 'chooseschool' ">
			<ul>
				<li>
					<img class="chooseschool_logo"  src="../../../../assets/images/wechat/index/studentlogin/findpassword_school.png">
					<div class="chooseschool_title">搜索结果</div>
					<div class="chooseschool_total">共{{pageData.total}}个</div>
				</li>
				
				<li v-for="(item,index) in schoolList" :key="index" @click="chooseSchool(index)">
					<img class="chooseschool_logo"  v-bind:src="baseUrl+'/static/upload/school/'+item.logo">
					<div>{{item.name}}</div>
					<img class="chooseschool_choose" src="@/assets/images/wechat/index/studentlogin/findpassword_choose.png">
				</li>
				
			</ul>
		</div>
				
				
		<img src="@/assets/images/wechat/index/leaderlogin/leaderlogin1.png">
		<ul class="main_form">
			<li>
				<label>
					<img src="@/assets/images/wechat/index/leaderlogin/leaderlogin3.png">
				</label>
				<input type="text" @click="showSchool()" v-model="studentData.schoolName" readonly placeholder="请选择院校" />
			</li>
			<li>
				<label>
					<img src="@/assets/images/wechat/index/leaderlogin/leaderlogin4.png">
				</label>
				<input type="text" v-model="studentData.acctno" placeholder="请输入账号" maxlength="20" />
			</li>
			<li>
				<label>
					<img src="@/assets/images/wechat/index/leaderlogin/leaderlogin5.png">
				</label>
				<input type="password" v-model="studentData.passwd" placeholder="请输入密码" maxlength="22" />
			</li>
		</ul>
		<input type="button" @click="login" value="账号密码登录" />
		<a @click="wechatAuth()" href="javascript:;">微信授权登录</a>
		
		<img src="@/assets/images/wechat/index/leaderlogin/leaderlogin2.png">
	</div>
</template>

<script>
//引入js
import router from '@/router/index'
import { openSelectSchool } from '@/api/school'
import { loginByAcctno } from '@/api/student'
import jsMd5 from 'js-md5'

export default {
  components: {
  },
  data(){
    return {
		baseUrl:process.env.VUE_APP_BASE_API,
		appId:"",
		
		schoolFlag:false,
		pageData: {
		  nowPage: 1,
		  maxPage: 1,
		  total: 1,
		  limit: 20
		},
		schoolList:[],
		studentData:{
			schoolName:"",
			schoolId:0,
			acctno:"",
			passwd:""
		}
    }
  },
  created:function(){
	this.appId=this.$store.state.globalData.wechatConfig.appId
	this.selectSchool()
  },
  beforeMount: function() {
	  
  },
  mounted: function () {
	  
  },
  methods:{
	selectSchool:async function(){
		var ajaxData = {}
		ajaxData.pageNo = 1
		ajaxData.pageSize = 20
		var resultData =  await openSelectSchool(ajaxData)
		if(resultData.code==200){
			this.pageData.total = resultData.data.total
			this.pageData.maxPage = resultData.data.maxPage
			this.schoolList=resultData.data.schoolFindResVoList
		}
	},
	showSchool:function(){
		this.schoolFlag=true;
	},
	chooseSchool:function(index){
		this.studentData.schoolId=this.schoolList[index].id
		this.studentData.schoolName=this.schoolList[index].name
		this.schoolFlag=false
	},
	login:async function(){
		var that=this;
		if(that.studentData.schoolId==0)
		{
			alert("请选择学校");
			return
		}
		if(!that.studentData.acctno)
		{
			alert("请填写账号");
			return
		}
		if(!that.studentData.passwd)
		{
			alert("请填写密码");
			return
		}
		
		var ajaxData={};
		ajaxData.schoolId=that.studentData.schoolId;
		ajaxData.acctno=that.studentData.acctno;
		ajaxData.passwd=jsMd5(that.studentData.passwd);
		var resultData=await loginByAcctno(ajaxData)
		if(resultData.code==200)
		{
			//存起来token和身份信息
			var expireTime=Date.parse(new Date())/1000+72000;//20小时后过期
			//同步更新store
			this.$store.commit("setIdentity",1);
			this.$store.commit("setToken",resultData.data);
			this.$store.commit("setExpireTime",expireTime);
			 /*存储到ls*/
			localStorage.setItem('identity',1);
			localStorage.setItem('token',resultData.data);
			localStorage.setItem('expireTime',expireTime);
			
			router.replace({path:"/wechatstudent/studentcenter"});
			return;
		}else{
			alert(resultData.msg)
		}

	},
	wechatAuth:function(){
		window.location="https://open.weixin.qq.com/connect/oauth2/authorize?appid="+this.appId+"&redirect_uri="+encodeURIComponent("https://www.lawguanjia.com/#/wechat/studentauthlogin")+"&response_type=code&scope=snsapi_userinfo#wechat_redirect";
	}
  }
}
</script>

<style lang="scss" scoped>
.chooseschool{ width:0; height:100%; overflow:hidden; position:fixed; background:#fff; z-index:10; transition:all 0.4s ease-in 0s;}
.chooseschool_active{ width:100% !important}
.chooseschool>ul{ width:100%; }
.chooseschool>ul>li{ width:100%;height:50px;border-bottom:1px solid #E8E8E8;  overflow:hidden}
.chooseschool>ul>li>.chooseschool_logo{ width:30px; margin-top:10px; float:left; margin-left:20px;}
.chooseschool>ul>li>div{ width:230px; float:left;margin-top:10px; margin-left:10px; height:30px; line-height:30px; overflow:hidden; text-overflow: ellipsis; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;}
.chooseschool>ul>li>.chooseschool_choose{ width:20px; margin-top:15px; float:right; margin-right:20px;}
.chooseschool_title{ width:100px !important; font-size:16px; font-weight: bolder;}
.chooseschool_total{ width:100px !important; float: right !important;margin-right:20px; text-align: right; color: #999;}

.main{ width: 100%;}
.main>img{ width: 100%; display:block;}
.main_form{ width: 320px; margin: auto; margin-top: 20px; margin-bottom: 20px; background-color: #d8e7fa; border-radius: 10px;}
.main_form>li{ width:300px ; margin: auto; border-bottom: 1px solid #0154bc; overflow: hidden; position: relative;}
.main_form>li:nth-child(3){border-bottom: 1px solid #d8e7fa;}
.main_form>li>label{ width: 36px; height:36px; margin-top: 10px;background-color: #d8e7fa; margin-bottom: 10px; float: left; overflow: hidden;}
.main_form>li>label>img{ width: 100%;}
.main_form>li>input{ width: 264px; float: left;margin-top: 10px; height: 36px;border: none;outline: none; text-indent: 10px;font-size: 14px;background-color: #d8e7fa;color:#6396cf;}
.main_form>li>input::-webkit-input-placeholder {color:#6396cf;}
.main_form>li>input:-moz-placeholder {color:#6396cf;}
.main_form>li>input::-moz-placeholder {color:#6396cf;}
.main_form>li>input:-ms-input-placeholder {color:#6396cf;}
.captcha{ height:36px; position: absolute; top: 10px;right:0}

.main>input{width: 200px; display: block; margin: auto; height: 42px; line-height: 42px; background-color:#011d80; color: #FFFFFF; border: 1px solid #011d80; outline: none; border-radius: 21px;font-size: 16px;-webkit-appearance:none;}
.main>a{ width: 198px; display: block; margin: auto; line-height: 40px; border: 1px solid #011d80; text-align: center; border-radius: 21px; font-size: 16px; margin-top: 10px; color:#011d80}

</style>
